<template>
  <Modal :value="show" @on-visible-change="changeModal" :title="options.title" width="600" :mask-closable="!options.isedit">
			<Form :label-width="80" :model="form" ref="form" :rules="rules" class="orgForm">
				<Row :gutter="32">
          <Col :md="23">
            <FormItem label="姓名" prop="empName">
            	<Input v-model="form.empName" placeholder="请输入用户姓名" :maxlength="20" :disabled="!options.isedit"></Input>
       			</FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col :md="23">
            <FormItem label="登录名" prop="loginName">
            	<Input v-model="form.loginName" placeholder="请输入登录名" :maxlength="20" :disabled="!canEditLoginName"></Input>
              <span class="form-item-tip">默认密码：账号+888</span>
       			</FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col :md="23">
            <FormItem label="手机号码" prop="phone">
            	<Input v-model="form.phone" placeholder="请输入手机号码" :maxlength="11" :disabled="!options.isedit"></Input>
       			</FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col :md="23">
            <FormItem label="电子邮箱" prop="email">
            	<Input v-model="form.email" placeholder="请输入电子邮箱" :maxlength="30" :disabled="!options.isedit"></Input>
       			</FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col :md="23">
            <FormItem label="岗位" prop="myJobs">
              <Select v-model="jobVals" multiple :disabled="!options.isedit || self" placeholder="请选择岗位" transfer>
                <Option v-for="item in joblistCal" :value="item.id" :key="`job-options-${item.id}`">{{ item.jobName }}</Option>
                <ul v-if="joblistCal.length <= 0" class="ivu-select-not-found"><li>暂无数据</li></ul>
              </Select>
              <span class="form-item-tip" v-if="options.isedit">岗位提示：岗位在保存时会合并保留最大权限</span>
       			</FormItem>
          </Col>
        </Row>
        <Row :gutter="32" v-if="options.isedit && !self">
          <Col :md="23">
            <FormItem label="是否启用" prop="enable">
              <RadioGroup v-model="form.enable">
                  <Radio :label="1"><span>是</span></Radio>
                  <Radio :label="0"><span>否</span></Radio>
              </RadioGroup>
       			</FormItem>
          </Col>
        </Row>
				<Spin size="large" fix v-if="isModalLoading"></Spin>
			</Form>
      <div slot="footer">
          <Button  @click="close">取消</Button>
          <Button type="primary" v-if="options.isedit" :loading="isModalLoading" @click="submit">保存</Button>
      </div>
		</Modal>
</template>

<style lang="less" scoped>
	.ivu-form-item-content{
    .form-item-tip{
      display: block;
      line-height: 1.5;
    }
  }
</style>

<script>
  import {mapState,mapActions,mapMutations} from 'vuex'
  import {post} from '@/util/request'

  /*
    options:{
      title:string,
      isedit:bool
    }
  */
  export default {
    props:['value','show','options'],
    mounted(){

    },
    data(){
      return {
        isModalLoading:false,
        jobList:[],
        detail:{},

        form:{myJobs:null,enable:1},
        fromJobs: [],
        jobVals:[],
        rules:{
          empName:{required:true, message:'姓名必填', trigger:'blur'},
          loginName:{required:true, message:'登录名必填', trigger:'blur'},
          myJobs:{required:true, message:'岗位必填', trigger:'change'},
          phone:{pattern:/^1[3|4|5|7|8][0-9]{9}$/,message:'必须是有效手机号码',trigger:'blur'},
          email:{type:'email',message:'请输入正确的电子邮箱地址',trigger:'blur'}
        }
      }
    },
    watch:{
      detail(v){
        if(!v.employee) return;
        this.form = {myJobs:null,...v.employee};
        this.fromJobs = [...v.Jobs];
        this.jobVals = this.fromJobs.map(item => item.id);
      },
      jobVals(v){
        this.form.myJobs = v.join(',');
      }
    },
    computed:{
      ...mapState('base',['userinfo']),
      canEditLoginName(){
        return this.options.isedit && !this.form.id;
      },
      self(){
        return this.value === this.userinfo.employee.id;
      },
      joblistCal(){
        if (this.detail.employee && this.detail.employee.isdefault === 1){
          let temp = [...this.jobList,...this.detail.Jobs];
          return temp;
        }
        return this.jobList;
      }
    },
    methods:{
      changeModal(e){
        !e && this.close();
        if (e){
          post('/auth/employee/jobs').then(res => {
            if (res.data.success){
              this.jobList = res.data.data;
            }
          });
        }

        if (e && this.value){
          this.isModalLoading = true;
          post('/auth/employee/view',{id:this.value}).then(res => {
            this.detail = res.data.data;
            this.isModalLoading = false;
          });
        }
      },
      close(){
        this.form = {myJobs:null,enable:1};
        this.detail = {};
        this.jobVals = [];
        this.$refs.form.resetFields();
        this.$emit('close');
      },
      async submit(){
        let v = await this.$refs.form.validate();
        if (v){
          if (this.form.id){
            this.submitEdit();
          }else{
            this.submitAdd();
          }
        }
      },
      async submitAdd(){
        this.isModalLoading = true;
  			let res = await post("/auth/employee/addSave",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.$emit('add');
          this.close();
        }else{
          this.$Message.error(res.data.msg);
        }
      },
      async submitEdit(){
        this.isModalLoading = true;
        this.form.createtime && delete this.form.createtime;
        let res = await post("/auth/employee/updateSave",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.$emit('edit',this.form);
          this.close();
        }else{
          this.$Message.error(res.data.msg);
        }
      }
    }
  };
</script>
